<script setup lang="ts">
// vue3 js父传子接收写法
// defineProps({
//   num: {
//     type: Number
//     required:true
//     default:0
//     validator:(value)=>{return Boolean}
//   }
// })

import { PropType } from 'vue'

// ts接收父传子
/*
withDefaults(
    defineProps<{
        属性名?:ts类型
    }>(),
    {
        属性名:默认值
            默认值也分基本数据类型：直接写
                    复杂数据类型：()=>复杂数据
    }
)

*/

// withDefaults(
//   defineProps<{
//     num?: 0 | 1
//   }>(),
//   {
//     num: 0
//   }
// )
// vue+ts  js写法但通过PropType兼容了Ts
defineProps({
  num: {
    type: Number as PropType<0 | 1>,
    default: 1
  }
})

/*
子接收父传入参数写法
1：纯js写法
  defineProps({
    属性名:{
        type:Number....
    }
  })

2:纯ts写法
 withDefaults(
  defineProps<{
    属性名?:ts类型
  }>(),
  {
    属性名:默认值
        基本数据类型：直接写
        复杂数据类型：()=>复杂数据
  })

3：js兼容ts写法
import {PropType} from 'vue'
 defineProps({
    属性名:{
        type:Number as PropType<ts类型>
    }
 })

 子传父

 纯js写法 
   <子组件标签  @方法名="父组件方法"  />
   子组件内
     const emits=defineEmits(['方法名'])
     emits('方法名',实参)

  ts写法
   <子组件标签  @方法名="父组件方法"  />
   子组件内
   const emits=defineEmits<{
    (e:'方法名',x:实参ts类型):返回值类型，无返回值void
   }>()
   emits('方法名',实参)


*/
const emits = defineEmits<{
  (e: 'btn', s: string): void
  (e: 'xxxfn', n: 0 | 1): void
}>()
const btnClick = () => {
  emits('btn', 'hello')
}
const btnClick2 = () => {
  emits('xxxfn', 0)
}
</script>

<template>
  <div class="son-page">我是子组件----{{ num }}</div>
  <button @click="btnClick">触发父组件方法</button>
  <button @click="btnClick2">触发父组件方法</button>
</template>

<style lang="scss" scoped></style>
